import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import {
  Table,
  Icon,
  Divider,
  Form,
  Select,
  DatePicker,
  Input,
  Card,
  Tag,
  Avatar,
  Checkbox,
  Rate,
  Progress,
  Button,
  message,
  Row,
  Col,
  Modal,
  Collapse,
  List,
  Radio,
} from 'antd';

import IdentityVerify from './IdentityVerify';
import AntiFraudVerify from './AntiFraudVerify';
import PbcVerify from './PbcVerify';

const Option = Select.Option;

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 18,
  },
};

@connect(({ risk, apply }) => ({
  risk,
  apply,
}))
export default class ThirdVerify extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      thirdVerifyVisible: false,
      thirdVerifyFraudVisible: false,
      thirdVerifyFraudDetailsVisible: false,
      fraudDetails: null,
      creditReporting: false,
      creditReportingResult: false,
      bankNameValue: '',
      restMoneyVisible: false, //
      creditScoreVisible: false,
      identityVerifyVisible: false,
    };
  }

  componentDidMount() {
    const { dispatch } = this.props;
    const { item } = this.props;
    this.setState({
      fraudDetails: item,
    });
    dispatch({
      type: 'risk/getCustomerBalance',
    });
    dispatch({
      type: 'risk/getCustomerPrice',
      payload: {
        projectCode: 'PCI007', //产品code 固定的值
      },
    });
    dispatch({
      type: 'risk/getBankList',
    });
  }

  handleLoadThirdDataLoaidng = isFlag => {
    const { dispatch } = this.props;
    dispatch({
      type: 'apply/loadThirdPartyData',
      payload: isFlag,
    });
  };

  handleClickCard = (e, item) => {
    if (item.type == 'identityVerify') {
      //个人身份认证
      if (item.thirdPartyQuery && item.value == -1) {
        //未查并且从业务初筛进来才能查询
        this.handleLoadThirdDataLoaidng(false);
        this.setState({
          thirdVerifyFraudVisible: true,
          identityVerifyVisible: true,
        });
        return;
      }
    }
    if (item.type == 'cheatVerify') {
      //反欺诈筛查
      if (item.value == 1) {
        //已查
        this.setState({
          thirdVerifyFraudDetailsVisible: true,
        });
        return;
      }
      if (item.thirdPartyQuery && item.value == 0) {
        //未查并且从业务初筛进来才能查询
        this.handleLoadThirdDataLoaidng(false);
        this.setState({
          thirdVerifyFraudVisible: true,
        });
        return;
      }
    }
    if (item.type == 'creditVerify') {
      //人行征信
      // console.log("item.thirdPartyQuery: ", item.thirdPartyQuery)
      // console.log("item.value: ", item.value)
      if (item.thirdPartyQuery && item.value == 0) {
        //未查并且从业务初筛进来才能查询
        this.setState({
          creditReporting: true,
        });
        return;
      }
      if (item.value != 4 && item.value != 0) {
        //4是查询中
        this.setState({
          creditReportingResult: true,
        });
        return;
      }
    }
    if (item.type == 'creditScore') {
      //个人信用评分
      this.setState({ creditScoreVisible: true });
    }
  };

  /**
   * render methods
   */
  renderThirdVerifyCardTitle = () => {
    const { item } = this.props;
    return (
      <div>
        <Icon type={this.getIcon()} style={{ color: '#2a90fa', marginRight: '8px' }} />
        {item.title}
      </div>
    );
  };

  handleModalOk = () => {
    //个人身份认证
    const { dispatch } = this.props;

    if (this.state.identityVerifyVisible) {
      this.handleLoadThirdDataLoaidng(true);
      dispatch({
        type: 'apply/getIdentityAuthentic',
        payload: {
          projectId: this.state.fraudDetails.projectId,
          customerId: this.state.fraudDetails.customerId,
          name: this.state.fraudDetails.customerName,
          idCard: this.state.fraudDetails.customerIdCard,
          phone: this.state.fraudDetails.customerPhone,
        },
        callback: () => {
          const { apply: { applyResult } } = this.props;
          // console.log("applyResult", applyResult)
          this.handleLoadThirdDataLoaidng(false);
          if (applyResult.code == '200') {
            this.setState({
              thirdVerifyFraudVisible: false,
              identityVerifyVisible: false,
            });
            dispatch({
              type: 'risk/showScreen',
              payload: {
                projectId: this.state.fraudDetails.projectId,
              },
            });
            message.success('查询成功');
          } else {
            message.error(applyResult.message);
          }
        },
      });
    } else {
      this.setState({ restMoneyVisible: true });
    }
  };

  handleUnivalentOK = () => {
    //反欺诈查询
    const { dispatch } = this.props;
    this.handleLoadThirdDataLoaidng(true);
    dispatch({
      type: 'apply/opposeCheat',
      payload: {
        projectId: this.state.fraudDetails.projectId,
        customerId: this.state.fraudDetails.customerId,
        name: this.state.fraudDetails.customerName,
        idCard: this.state.fraudDetails.customerIdCard,
        mobile: this.state.fraudDetails.customerPhone,
      },
      callback: () => {
        const { apply: { applyResult } } = this.props;
        this.handleLoadThirdDataLoaidng(false);
        if (applyResult.code == 200) {
          this.setState({
            restMoneyVisible: false,
            thirdVerifyFraudVisible: false,
            thirdVerifyFraudDetailsVisible: true,
          });
          dispatch({
            type: 'risk/showScreen',
            payload: {
              projectId: this.state.fraudDetails.projectId,
            },
          });
          message.success('查询成功');
        } else {
          message.error(applyResult.message);
        }
      },
    });
  };

  handleFraudDetailsVisible = () => {
    this.setState({
      thirdVerifyFraudDetailsVisible: false,
    });
  };

  handleModalFraudCancel = () => {
    this.setState({
      identityVerifyVisible: false,
      thirdVerifyFraudVisible: false,
    });
  };

  handleCreditReportingVisible = () => {
    this.setState({
      creditReporting: false,
    });
  };

  handleCreditReportingOK = () => {
    //人行征信
    const { dispatch } = this.props;
    this.handleLoadThirdDataLoaidng(true);
    dispatch({
      type: 'risk/startCredit',
      payload: {
        projectId: this.state.fraudDetails.projectId,
        customerId: this.state.fraudDetails.customerId,
        bankId: this.state.bankNameValue,
      },
      callback: () => {
        const { risk: { riskResult } } = this.props;
        this.handleLoadThirdDataLoaidng(false);
        if ((riskResult.code = 200)) {
          this.setState({
            creditReporting: false,
          });
          message.success('查询成功');
          // this.setState({ antiFraudVerifyVisible: true, })
          dispatch({
            type: 'risk/showScreen',
            payload: {
              projectId: this.state.fraudDetails.projectId,
            },
          });
        } else {
          message.error(riskResult.message);
        }
      },
    });
  };

  renderOption = data => {
    const options = [];
    data.map(item => {
      options.push(
        <Option value={item.bankId} key={item.bankId}>
          {item.bankName}
        </Option>
      );
    });
    return options;
  };

  handleRoleListChange = value => {
    this.setState({
      bankNameValue: value,
    });
  };

  handleRestMoneyVisibleCancel = () => {
    this.setState({ restMoneyVisible: false, thirdVerifyFraudVisible: false });
  };

  handleVisibleCancel = () => {
    this.setState({
      creditReportingResult: false,
    });
  };

  handleCreditScoreVisibleCancel = () => {
    this.setState({ creditScoreVisible: false });
  };

  render() {
    const { risk: { riskBankList, riskCreditDate, customerBalance, customerPrice } } = this.props;
    const { apply: { loadThirdPartyDataLoading } } = this.props;
    const { item } = this.props;
    let label = null;
    if (item.value != null) {
      if (item.type === 'creditScore') {
        label = item.value;
      }

      if (item.type === 'cheatVerify') {
        if (item.value === 1) {
          label = <Tag color="green">已查</Tag>;
        } else {
          label = <Tag>未查</Tag>;
        }
      }

      if (item.type === 'creditVerify') {
        if (item.value === 0) {
          label = <Tag>未查</Tag>;
        }
        if (item.value === 1) {
          label = <Tag color="green">正常</Tag>;
        }
        if (item.value === 2) {
          label = <Tag color="orange">关注</Tag>;
        }
        if (item.value === 3) {
          label = <Tag color="red">建议禁入</Tag>;
        }
        if (item.value === 4) {
          label = <Tag color="blue">查询中</Tag>;
        }
      }

      if (item.type === 'identityVerify') {
        if (item.value === 0) {
          label = <Tag color="red">不一致</Tag>;
        }
        if (item.value === 1) {
          label = <Tag color="green">一致</Tag>;
        }
        if (item.value === -1) {
          label = <Tag>未查</Tag>;
        }
      }
    }

    return (
      <Card>
        <Card.Meta
          style={{ cursor: 'pointer' }}
          onClick={e => this.handleClickCard(e, item)}
          title={this.renderThirdVerifyCardTitle()}
          description={<div style={{ textAlign: 'center', height: '40px' }}>{label}</div>}
        />
        {/* {this.renderModal()} */}
        <Modal
          title="免责条款"
          width="720px"
          visible={this.state.thirdVerifyFraudVisible}
          onCancel={this.handleModalFraudCancel}
          onOk={this.handleModalOkFraudVisible}
          footer={null}
        >
          <Card
            actions={[
              <Button
                type="primary"
                onClick={this.handleModalOk}
                loading={loadThirdPartyDataLoading}
              >
                同意
              </Button>,
              <Button onClick={this.handleModalFraudCancel}>不同意</Button>,
            ]}
          >
            <Card.Meta
              title={<center>免责条款</center>}
              description={
                <div>
                  <p>免责条款的概念:免责条款，就是当事人以协议排除或限制其未来责任的合同条款。</p>
                  <p>其一，免责条款是合同的组成部分，是一种合同条款;</p>
                  <p>
                    其二，免责条款的提出必须是明示的，不允许以默示方式作出，也不允许法官推定免责条款的存在。
                  </p>
                </div>
              }
            />
          </Card>
        </Modal>
        <Modal
          title="账户余额"
          visible={this.state.restMoneyVisible}
          onCancel={this.handleRestMoneyVisibleCancel}
          onOk={this.handleUnivalentOK}
          confirmLoading={loadThirdPartyDataLoading}
        >
          <Card>
            <Card.Meta
              description={
                <div>
                  <center>本账户剩余金额：{customerBalance && customerBalance.money}</center>
                  <center>本次查询扣除金额：{customerPrice && customerPrice.price}</center>
                </div>
              }
            />
          </Card>
        </Modal>
        <Modal
          title="反欺诈详情"
          width="70%"
          visible={this.state.thirdVerifyFraudDetailsVisible}
          onCancel={this.handleFraudDetailsVisible}
          footer={null}
        >
          <AntiFraudVerify item={this.props.item} />
        </Modal>
        <Modal
          title="选择支行"
          visible={this.state.creditReporting}
          onCancel={this.handleCreditReportingVisible}
          onOk={this.handleCreditReportingOK}
          confirmLoading={loadThirdPartyDataLoading}
        >
          <Row>
            <Col {...formItemLayout}>
              选择支行：
              <Select
                style={{ width: '80%' }}
                placeholder="请选择"
                onChange={this.handleRoleListChange}
              >
                {riskBankList && this.renderOption(riskBankList)}
              </Select>
            </Col>
          </Row>
        </Modal>
        <Modal
          title="人行征信"
          visible={this.state.creditReportingResult}
          onCancel={this.handleVisibleCancel}
          footer={null}
        >
          <PbcVerify item={this.props.item} />
        </Modal>
        <Modal
          title="个人信用评分"
          visible={this.state.creditScoreVisible}
          onCancel={this.handleCreditScoreVisibleCancel}
          footer={null}
        >
          <Row>
            <p>此功能暂未开放</p>
          </Row>
        </Modal>
      </Card>
    );
  }

  getIcon = () => {
    const { item } = this.props;
    if (item.type == 'identityVerify') {
      return 'idcard';
    }

    if (item.type == 'cheatVerify') {
      return 'html5';
    }

    if (item.type == 'creditVerify') {
      return 'bank';
    }

    if (item.type == 'creditScore') {
      return 'like-o';
    }
  };
}
